@import "../../containers/global/base.scss";

.wrapper {
  position: fixed;
  left: 50%;
  top: 20%;
  z-index: 1002;
  pointer-events: none;
  width: 90%;
  max-width: 550px;
}

.box{
  pointer-events: auto;
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  left: -50%;
  box-shadow: 0 0 50px rgba(0, 0, 0, .1);
  color:#4c4c4c;
  @include animaction(slideToTop, .5s);
}

.hide-box{
  @extend .box;
  transform: translate(-50%, 100%) scale(1.0, 1.0) translateZ(0px);
  @include animaction(slideToBottom, .5s);
}

.modal-header{
  padding: 33px 30px 0;
}
.modal-body{
  padding:18px 30px 30px 30px;
}
.modal-footer{
  border-top: 1px solid #eaeaea;
  padding: 15px;
}

.close{
  position: absolute;
  top:0px;
  left:100%;
  margin-left:20px;
  z-index: 999999;
  width: 30px;
  height: 30px;
  background-image: url('./images/close.png');
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  @include cursorHand();
}

.mark{
  position: fixed;
  top:0;
  left: 0;
  width:100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .6);
  z-index: 1001;
  @include animaction(fadeIn, .5s);
}

.hide-mark{
  @extend .mark;
  opacity: 0;
  @include animaction(fadeOut, .5s);
}
